<script setup>
defineProps({
  width: {
    type: String,
    default: '960',
  },
  height: {
    type: String,
    default: '468',
  },
  type: {
    type: String,
    default: 'normal',
  },
  mask: {
    type: Boolean,
    default: true,
  },
})
const visiable = ref(false)
function closeByEsc(e) {
  if (e.key === 'Escape') {
    close()
  }
}
function open() {
  visiable.value = true
  window.addEventListener('keyup', closeByEsc)
}
function close() {
  visiable.value = false
  window.removeEventListener('keyup', closeByEsc)
}
defineExpose({ open, close })
</script>

<template>
  <teleport to="body">
    <div class="mask" v-if="visiable && mask"></div>
    <div class="popup" :style="{ width: `${width}px`, height: `${height}px` }" v-if="visiable">
      <div class="popup-box">
        <img v-if="type == 'normal'" src="/src/assets/images/popup.png" />
        <img v-else src="/src/assets/images/map_popup.png" />
        <div class="close" @click="close" :style="{ top: type == 'normal' ? '3%' : '5%' }"></div>
        <div class="title">
          <slot name="title"></slot>
        </div>
        <div class="content">
          <slot></slot>
        </div>
      </div>
    </div>
  </teleport>
</template>

<style lang="scss" scoped>
.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 111111110;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup {
  position: fixed;
  z-index: 111111111;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .popup-box {
    width: 100%;
    height: 100%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
    }
    .close {
      position: absolute;
      width: 24px;
      height: 24px;
      right: 20px;
      cursor: pointer;
      background: url('/src/assets/img/close.png') no-repeat;
    }
    .content {
      height: 100%;
      padding: 50px 20px 30px 20px;
      color: #fff;
    }
  }
}
</style>
